<template>
  <div>
    <div class="login-container">
      <h1>音乐平台</h1>
      <form @submit.prevent="login">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" v-model="user.username" required />
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" v-model="user.password" required />
        </div>
        <button type="submit">登录</button>
        <!-- Form -->
        <el-button type="text" @click="dialogFormVisible = true" style="position: relative;; left: 100px;">注册</el-button>
        <p v-if="loginError" class="error">{{ loginError }}</p>
      </form>
    </div>

    <div>
      <el-dialog :close-on-click-modal=false title="注册" :visible.sync="dialogFormVisible" width="35%" style="margin-top:-50px">
        <form @submit.prevent="register" class="form-register">
          <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="newUser.username" required />
            <br />
            <label>昵称</label>
            <input type="text" v-model="newUser.nickname" required />
            <br />
            <label>

              男:<input type="radio" name="fruit" value="1" v-model="newUser.gender" style="width:50px;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              女:<input type="radio" name="fruit" value="2" v-model="newUser.gender" style="width:50px;">
            </label>
            <br />
            <label>出生日期</label>
            <input type="date" v-model="newUser.birthday" required />
            <br />
            <label>密码</label>
            <input type="password" v-model="newUser.password" required />
            <br />
            <label>再次输入密码</label>
            <input type="password" v-model="newUser.rPassword" required />
            <br />
          </div>

          <button type="submit" style="position: relative;left: 80%;">注册</button>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" append-to-body>
            <span>{{ registerInfo }}</span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </form>

      </el-dialog>
    </div>

  </div>
</template>

<style>
body {
  background: #fff;
  color: #2f3133;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #ccc;
  background: #f7f7f8;
  height: 220px;
}

.form-register {
  flex-direction: none;
  align-items: normal;
  height: auto;
  background: none;
  box-shadow: none;
  border: none;
}

h1 {
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

label {
  font-size: 18px;
  margin-bottom: 5px;
}

input[type="text"],
input[type="date"],
input[type="radio"],
input[type="password"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  font-size: 18px;
}

button[type="submit"] {
  padding: 10px;
  font-size: 14px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  width: 100px;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}



.error {
  color: red;
  margin-top: 10px;
  font-size: 16px;
}

.my-dialog .el-dialog__header {
  background-color: red;
}
</style>


<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import userApi from "@/api/userApi";


export default {
  name: "LoginView",
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      newUser: {
        id:null,
        username: "",
        password: "",
        nickname:"",
        rPassword: "",
        birthday: null,
        gender: 1,
        userImg:"",
      },
      registerInfo: "",
      isSubmitting: false,
      loginError: null,
      dialogFormVisible: false,
      dialogVisible: false
    };
  },
  components: {
    HelloWorld,
  },
  created() {
    this.setPageTitle();
  },
  methods: {
    login() {
      userApi.login(this.user).then(response => {
        localStorage.setItem('token', JSON.stringify(response.data));
        this.$router.push('/indexView');
      
      }).catch(err =>{
        this.loginError = "用户名或密码错误！"
        console.log(err);
      })
    },
    register(){
      userApi.register(this.newUser).then(response => {
        console.log(this.newUser);
          if (response.data != "") {
            
            this.registerInfo = "注册成功，可以登录了";
          } else {
            this.registerInfo = "用户名已存在，请重试";
          }
          this.dialogVisible = true;
      })
    },
    setPageTitle() {
      document.title = this.$route.meta.title || "Bibin";
    },
  },
  mounted(){
    const token = localStorage.getItem('token')
    console.log(token);
    if(token){

      this.$router.push('/indexView');
    }
  }
};
</script>
